<template>
	
	<view  ref="goodsItem">
		
		<view class="shadow rds8">
			<view :class="picClass">
				<image class="rdsTl8 rdsTr8" :src="goods.pic" mode="aspectFill"></image>
				<view class="abs">
					<slot name="pic"></slot>
				</view>
			</view>
			<view class="whiteBg pd10 ptb5 rdsBl8 rdsBr8">
				<view class="bold fz14" :class="titleClass">
					{{goods.title}}
				</view>
				<slot></slot>
				<view class="flex priceInfo">
					<view class="item flex">
						<price class="orange item fz18 bold" :price="goods.price"></price>
						<view class="item">
							<slot name="price"></slot>
						</view>
					</view>
					<view class="item icon-gouwuchekong main"  @tap.stop="addToCart"></view>
				</view>
			</view>
		</view>
		
		
	</view>
	
</template>

<script>
	import price from "../price/price.vue" ;
	export default {
		name: "goodsItemVertical",
		components:{price},
		props: {
			goods:{
				type : Object ,
				default : function(){
					return {} ;
				}
			},
			goodsInfoPath:{
				default : "/pages/goodsInfo/goodsInfo"
			},
			titleRow:{
				default : 1 
			},
			picClass:{
				default : "oblong"
			}
		},

		data() {
			return {
				width : 0  
			};
		},
		
		created() {
			
		},
		
		computed:{
			
			titleClass : function(e){
				return this.titleRow > 1 && this.titleRow < 7 ? 'clip c' + this.titleRow : 'cut' ;
			}
		},

		methods: {
			
			addToCart: function(e) {
				this.$emit("addToCart", e);
			},
			
			toGoodsInfo:function(e){
				if(!this.goodsInfoPath){
					this.$emit("tapGoods", e);
					return ;
				}
				uni.navigateTo({
					url: this.goodsInfoPath + "?id=" + this.goods.id 
				});
			},
		}
	}
</script>
<style>
	.priceInfo{
		padding-top: 6upx;
	}
	.fz18{
		line-height: 36upx;
	}
	.cut{
		text-overflow: clip;
	}
</style>
